import React, { useRef } from 'react';
import {
  Button,
  Space,
  Swiper,
  Toast,
  Tabs,
  Badge,
  FloatingBubble,
  NavBar,
} from 'antd-mobile';
import { Divider } from 'antd';
import { MessageFill, SendOutline } from 'antd-mobile-icons';
import { history } from 'umi';
import './index.less';
const img = [
  {
    id: '1',
    pic: '/图片1.jpg',
    name: '婚纱摄影',
  },
  {
    id: '2',
    pic: '/图片2.jpg',
    name: '婚纱摄影',
  },
  {
    id: '3',
    pic: '/图片3.jpg',
    name: '婚纱摄影',
  },
  {
    id: '4',
    pic: '/图片4.jpg',
    name: '婚纱摄影',
  },
  {
    id: '5',
    pic: '/图片5.jpg',
    name: '婚纱摄影',
  },
];
const items = img.map((color, index) => (
  <Swiper.Item key={index}>
    <div className="img">
      <img src={require('./img' + color.pic)} alt="" />
    </div>
  </Swiper.Item>
));
const back = () => {
  history.goBack();
};

export default function details() {
  return (
    <>
      <NavBar onBack={back} className="navs">
        详情
      </NavBar>
      <div>
        <Swiper loop autoplay indicator={() => null}>
          {items}
        </Swiper>
      </div>

      <div className="content">
        <h2
          style={{
            marginLeft: '0.3rem',
            fontWeight: 'bold',
            fontSize: '0.4rem',
          }}
        >
          大理法式印象婚纱摄影旗舰店(大理店)
        </h2>
        <img src={require('./img/法式印象.jpg')} alt="" />
      </div>
      <h4 style={{ marginLeft: '0.3rem', color: '#AEAEAE' }}>
        原创全球样片研发团队
      </h4>
      <img
        src={require('./img/金钻商家.jpg')}
        style={{ marginLeft: '0.4rem' }}
        alt=""
      />
      <div className="address">
        <span>云南省大理白族自治州大理市</span>
        <img src={require('./img/预约到店.jpg')} alt="" className="img1" />
        <img src={require('./img/电话.jpg')} alt="" className="img2" />
      </div>
      <div>
        <span style={{ marginLeft: '0.4rem' }}>￥4999-13140</span>
        <span style={{ marginLeft: '0.1rem', color: '#AEAEAE' }}>拍摄均价</span>
        <span className="baojia">咨询报价</span>
      </div>
      <div className="middle">
        <div className="middle1">
          <span>婚礼纪专享</span>
          <br />
          <img
            src={require('./img/红包.jpg')}
            alt=""
            style={{ backgroundColor: '#FFF4F6' }}
          />
          <span>优惠卷</span>
          <span style={{ color: 'red', marginLeft: '0.5rem' }}>
            2000元无门槛
          </span>
          <span
            style={{
              marginRight: '1.1rem',
              float: 'right',
              color: 'red',
            }}
          >
            领取＞
          </span>
          <Divider style={{ margin: '0.2rem', padding: '0' }} />
          <img src={require('./img/红包.jpg')} alt="" />
          <span>到店礼</span>
          <span style={{ marginLeft: '0.5rem' }}>24小时接机+结婚登记照</span>
          <span
            style={{
              marginRight: '1.1rem',
              float: 'right',
              color: 'red',
            }}
          >
            领取＞
          </span>
          <FloatingBubble
            children="分享"
            style={{
              '--initial-position-right': '0.1rem',
              '--background': 'white',
              '--size': '0.8rem',
              opacity: 0.8,
              '--zIndex': '999',
            }}
          >
            <SendOutline fontSize={22} style={{ color: '#666666' }} />
          </FloatingBubble>
          <Divider style={{ margin: '0.2rem', padding: '0' }} />
          <img src={require('./img/红包.jpg')} alt="" />
          <span>咨询礼</span>
          <span style={{ marginLeft: '0.5rem' }}>赠送精修</span>
          <span
            style={{
              marginRight: '1.1rem',
              float: 'right',
              color: 'red',
            }}
          >
            领取＞
          </span>
        </div>
      </div>
      <div
        style={{
          width: '100%',
          height: '0.15rem',
          backgroundColor: '#F2F3F6',
          marginTop: '0.3rem',
        }}
      ></div>

      <div>
        <Tabs>
          <Tabs.Tab title="推荐" key="fruits">
            <h1 style={{ fontWeight: 'bold', fontSize: '0.3rem' }}>
              3月·新片发布
            </h1>
            <Swiper loop autoplay style={{ borderRadius: '3%' }}>
              {items}
            </Swiper>
          </Tabs.Tab>
          <Tabs.Tab title="套餐" key="vegetables">
            西红柿
          </Tabs.Tab>
          <Tabs.Tab
            title={
              <Badge
                content="225"
                style={{ '--right': '-10px', '--top': '8px' }}
              >
                评价
              </Badge>
            }
            key="animals"
          >
            蚂蚁
          </Tabs.Tab>
        </Tabs>

        <div
          style={{
            width: '100%',
            height: '0.15rem',
            backgroundColor: '#F2F3F6',
            marginTop: '0.3rem',
          }}
        ></div>
        <h1
          style={{ margin: '0.2rem', fontWeight: 'bold', fontSize: '0.3rem' }}
        >
          人气推荐
        </h1>
        <div style={{ display: 'flex', width: '100%', overflowX: 'scroll' }}>
          <img src={require('./img/人气top1.jpg')} alt="" />
          <img src={require('./img/人气top2.jpg')} alt="" />
          <img src={require('./img/人气top3.jpg')} alt="" />
        </div>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
      </div>
    </>
  );
}
